<template>
    <div class="tableC">
        <el-table :data="filterTableData.slice(
              (data.currentPage - 1) * data.pagesize,
              data.currentPage * data.pagesize
            )" style="width: 100%">
            <el-table-column label="食物图片">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <img
                            class="userAvatar"
                            :src="scope.row.shopImg"
                            alt=""
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="名字" prop="shopName" />
            <el-table-column label="价格" prop="shopPrice" />

            <el-table-column label="数量" prop="shopMonth">
            </el-table-column>

            <el-table-column align="right">
                <template #header>
                    <el-input
                        v-model="search"
                        size="small"
                        placeholder="搜索食物"
                    />
                </template>
                <template #default="scope">
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="fy"
          layout="prev, pager, next"
          @current-change="currentShowPage"
          :total="data.total"
          background 
        >
        </el-pagination>
    </div>
</template>

<script>
import { computed, ref, onMounted, reactive } from "vue";
import axios from "axios";
export default {
    setup() {
        const data = reactive({
            // 存放评论的数组
            result: [],
            total: 20, //默认数据总数
            pagesize: 5, //每页的数据条数
            currentPage: 1, //默认开始页面
        });
        function getData() {
            axios
                .get("http://120.76.246.120:4455/Sapi/allshop")
                .then(({ data: res }) => {
                    if (res.code === 200) {
                        data.result = res.data;
                        console.log(data.result);
                    }
                });
        }
        getData();

        // 过滤器
        const search = ref("");
        const filterTableData = computed(() =>
            data.result.filter(
                (data) => !search.value || data.shopName.includes(search.value)
            )
        );

        // 删除
        const handleDelete = (index, row) => {
            axios.get('#'+row.id).then((res)=>{
              console.log(res);
            }).catch(error=>{
              console.log(error.message);
            })
        };

        // 获取当前点击页面
        function currentShowPage(curPage){
          data.currentPage = curPage
        }

        return {
            filterTableData,
            search,
            handleDelete,
            currentShowPage,
            data,
        };
    },
};
</script>

<style scoped>
.tableC {
    width: 100%;
    margin: 20px;
    border-radius: 10px;
}
.userAvatar {
    width: 100px;
    height: 100px;
}
</style>